<template>
  <div class="bg">
    <div class="people_box"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      sum: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.peopleEcharts();
    });
  },
  methods: {
    peopleEcharts() {
      var chartDom = document.querySelector(".people_box");
      var myChart = echarts.init(chartDom);
      let Data = [
        { value: 108, name: "人员1", people: "48.6" },
        { value: 218, name: "人员2", people: "48.6" },
        { value: 318, name: "人员3", people: "48.6" },
        { value: 418, name: "人员4", people: "48.6" },
        { value: 518, name: "人员5", people: "48.6" },
        { value: 318, name: "人员6", people: "48.6" },
        { value: 518, name: "人员7", people: "48.6" },
        { value: 28, name: "人员8", people: "65.36" },
        // { value: 708, name: "人员9", people: "12.9" },
        // { value: 848, name: "人员10", people: "8.3" },
      ];
      let Datalength = Data.length;
      let leftnum = Math.ceil(Datalength / 2);
      // let rightnum =Math.ceil(Datalength - leftnum);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            icon: "circle",
            data: Data.slice(0, leftnum),
            x: "left",
            bottom: "5%",
            orient: "vertical",
            itemWidth: 10,
            // itemHeight: 20,

            itemGap: 20,
            textStyle: {
              //图例文字的样式
              fontSize: 16,
              fontFamily: "微软雅黑",
              // backgroundColor :"#cfcfcf",
              rich: {
                title: {
                  height: 20,
                  fontSize: 16,
                  color: "#666",
                },
                num: {
                  height: 20,
                  fontSize: 18,
                  color: "#333",
                },
                bfb: {
                  height: 20,
                  fontSize: 16,
                  color: "#333",
                },
              },
            },
            formatter: function (name) {
              let itemvalue = "";
              let itempeople = "";
              Data.forEach((item) => {
                if (item.name == name) {
                  itemvalue = item.value;
                  itempeople = item.people;
                }
              });
              return (
                "{title| " +
                name +
                "}\n{num| " +
                itemvalue +
                "人}{bfb|/" +
                itempeople +
                "%}"
              );
            },
          },
          {
            icon: "circle",
            data: Data.slice(leftnum, Datalength),
            bottom: "5%",
            x: "right",

            orient: "vertical",
            itemWidth: 10,
            // itemHeight: 20,
            itemGap: 15,
            textStyle: {
              //图例文字的样式
              // color: "#333",
              // backgroundColor :"#cfcfcf",
              fontSize: 14,
              fontFamily: "微软雅黑",
              rich: {
                title: {
                  height: 25,
                  fontSize: 14,
                  color: "#666",
                },
                num: {
                  height: 25,
                  fontSize: 14,
                  color: "#333",
                },
                bfb: {
                  height: 30,
                  fontSize: 14,
                  color: "#333",
                },
              },
            },
            formatter: function (name) {
              let itemvalue = "";
              let itempeople = "";
              Data.forEach((item) => {
                if (item.name == name) {
                  itemvalue = item.value;
                  itempeople = item.people;
                }
              });
              return (
                "{title| " +
                name +
                "}\n{num| " +
                itemvalue +
                "人}{bfb|/" +
                itempeople +
                "%}"
              );
            },
          },
        ],

        series: [
          {
            roseType: "area",
            name: "特种人员",
            type: "pie",
            radius: ["30%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    // "#2973AC",
                    // "#2E8DD7",
                    // "#078FF8",
                    // "#439EF0",
                    // "#5AB1FF",
                    "#6C7BF7",
                    "#757CCD",
                    "#845BC2",
                    "#B19AD4",
                    "#CFC0DD",
                    "#A1A0DA",
                    "#FFB264",
                    "#C8824E",
                    "#D56E22",
                    "#BF8630",
                    "#864622",
                    "#E58D04",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: "{total|" + this.sum + "}",
                rich: {
                  total: {
                    fontSize: 36,
                    fontFamily: "微软雅黑",
                    color: "#333",
                  },
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "50",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: Data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.people_box {
  width: 100%;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
